<template>
    <a-modal
      style="position:relative"
      v-model="visiable"
      dialogClass="modal-dialog-class"
      :title="title"
      :width="modealWidth"
      :footer="null"
      :closable="false"
      destroyOnClose
      @cancel="handleCancel"
      centered>
      <div style="width:100%; position: relative;">
        <div class="modal-spin-wrap" v-if="loading">
          <a-spin :spinning="loading" />
        </div>
        <slot name="topButton"></slot>
        <slot></slot>
      </div>

    </a-modal>
</template>

<script>
export default {
  props: {
    title: String,
    loading: {
      type: Boolean,
      default: () => false
    },
    modealWidth: {
      type: Number,
      default: () => 320
    },
    modalVisible: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    visiable: {
      get() {
        return this.modalVisible
      },
      set() {

      }
    }
  },
  methods: {
    handleCancel() {
      this.$emit('cancel', { value: false })
    }
  }
}
</script>
